import Vue from 'vue'
import App from './App.vue'
import '@/assets/css/bootstrap.css'

Vue.config.productionTip = false

// 1.导入vuex模块
import Vuex from 'vuex'

// 导入子模块
import counte from './store/counte'
import todo from './store/todo'

// 2.给vuex装插件
Vue.use(Vuex)
// 3.创建store的实例对象
const store = new Vuex.Store({
  // 注册子模块
  // 模块名：模块对象
  modules: {
    counte,
    todo
  },

  //Vuex 的配置对象
  // 核心成员state
  state: {
    count: 1, name: "甘", list: [
      { name: '甘甘', state: true },
      { name: '绿绿', state: false },
      { name: '婷婷', state: true },
    ],
  },

  // 所有的mutation函数中第一个形参都是state
  mutations: {
    add(state, payload) {
      // 修改数据必须由mutation中的函数来完成
      state.count += payload.num
    }
  },
  actions: {
    // 每以一个action函数第一个参数都是context
    // 上下文：指可以执行commit函数的对象。全局vuex对象
    // context就是为了让action内部可以调用mutation的对象
    subAsync(context, payload) {
      // 在action函数中一般会做异步操作
      setTimeout(() => {
        // 异步的结果不能直接修改state
        // 而且action函数中也没有state形参
        // context.commit('add',{num:-5})
        context.commit('add', payload)

      }, 1000)
    }
  },
  getters: {
    isAll(state) {
      return state.list.every(ele => ele.state)
    }
  }
})
// 挂载到Vue上
new Vue({
  render: h => h(App),
  store
}).$mount('#app')
